(function(){
    var tpl=''+
    '<div id="pagination" v-show="allcounts>0">' +
    '    <div class="left" v-show="iscount">共计：<span>{{allcounts}}</span>款</div>' +
    '    <div class="right">' +
    '        <ul class="list-unstyled clearfix">' +
    '            <li class="prev" v-on:click="prevPage">上一页</li>' +
    '            <li v-if="!isMobile" v-on:click="clickPage(item)" v-for="item in array" v-bind:class="{active:pageindex==item,noborder:item==\'...\'}">{{item}}</li>' +
    '            <li class="mobilePageCount" v-if="isMobile">{{pageindex+"/"+array.length}}</li>' +
    '            <li class="next" v-on:click="nextPage">下一页</li>' +
    '        </ul>' +
    '    </div>' +
    '</div>';
    Vue.component("pagination",{
        template:tpl,
        data() {
            return {
                allpages:"",    //总页数
                array:[],        //dom数据
                isMobile:/(iphone|android)/gi.test(navigator.userAgent)
            }
        },
        props:{
            pageindex:{
                type: Number,   //当前页码
                default:1
            },   
            allcounts: {        //总个数
                type: Number,
                default: 0
            },
            pagesize: {         //每页数量
                type: Number,
                default: 10
            },
            iscount:{           //是否显示数量
                type: Boolean,
                default:true
            }
        },
        methods:{
            // 点击切页
            clickPage(pageId) {
                if(pageId != "...") this.$emit('update:pageindex',pageId);
            },
            //上一页
            prevPage() {
                if(this.pageindex != 1) this.$emit('update:pageindex',this.pageindex-1);
            }, 
            //下一页
            nextPage() {
                if(this.pageindex!= this.allpages) this.$emit('update:pageindex',this.pageindex+1);
            },
            // 翻页后的dom结构变化
            pageCalculate() {
                var pageindex=this.pageindex;

                if(this.allpages == ''){

                    this.reCaculateAllCount();
                    
                    this.array = [];
                    
                    for(var i=1;i<=this.allpages;i++){
                        this.array.push(i); 
                    }
                }
                
                var allpages=this.allpages;

                if(allpages>7){
                    if(pageindex<=4){
                        this.array=[];
                        for(var j=1;j<=allpages;j++){
                            if(j<=5){
                                this.array.push(j); 
                            }else if(j===6){
                                this.array.push("..."); 
                            }else if(j===allpages){
                                this.array.push(j); 
                            }
                        }
                    }else if(pageindex>allpages-4){
                        this.array=[];
                        for(var k=1;k<=allpages;k++){
                            if(k===1){
                                this.array.push(k); 
                            }else if(k===2){
                                this.array.push("..."); 
                            }else if(k<=allpages&&k>allpages-5){
                                this.array.push(k); 
                            }
                        }
                    }else if(pageindex>=5&&pageindex<allpages-1){
                        this.array=[];
                        for(var i=1;i<=allpages;i++){
                            if(i===1||i===allpages){
                                this.array.push(i); 
                            }else if(i===2||i===allpages-1){
                                this.array.push("...");
                            }else if(pageindex<=i+2&&pageindex>=i-2){
                                this.array.push(i); 
                            }
                        }
                    }
                }
            },

            // 重新计算页码
            reCaculateAllCount:function(){
                var pagesize=this.pagesize;
                var allcounts=this.allcounts;
                var pageindex=this.pageindex;
                // 计算页数
                if(allcounts%pagesize===0){
                    this.allpages = parseInt(allcounts/pagesize);
                }
                if(allcounts%pagesize !== 0){
                    this.allpages = parseInt(allcounts/pagesize)+1;
                }
            }
        },
        watch:{
            // 监测页码变化
            pageindex() {
                this.pageCalculate();
                this.$emit('switch');
                this.$emit('notify');
            },
            // 监测总个数变化
            allcounts() {
                var pagesize=this.pagesize;
                var allcounts=this.allcounts;
                var pageindex=this.pageindex;
                // 计算页数
                if(allcounts%pagesize===0){
                    this.allpages = parseInt(allcounts/pagesize);
                }
                if(allcounts%pagesize !== 0){
                    this.allpages = parseInt(allcounts/pagesize)+1;
                }
                var allpages=this.allpages;
                // 总个数变化时的dom结构变化
                if(pageindex==1){
                    this.array=[];
                    if(allpages>7){
                        for(var j=1;j<=allpages;j++){
                            if(j<=5){
                                this.array.push(j); 
                            }else if(j===6){
                                this.array.push("..."); 
                            }else if(j===allpages){
                                this.array.push(j); 
                            }
                        }
                    }else{
                        for(var i=1;i<=allpages;i++){
                            this.array.push(i); 
                        }
                    }
                }else{
                    this.pageCalculate();
                }
            }
        }
    })
})();